<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index01</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="root">
    <div id="wrapper">
        <p>相对于浏览器窗口左边10%，上边10% 宽500px，高500px 边框：宽2px，颜色pink，视线，圆角 内边距20px</p>
        <div id="pink-box">
            <p>相对于父级容器左边30px，上边20px 宽200px，高100px 边框：宽3px 颜色black，虚线</p>
        </div>
        <div id="green-box">
            <p>宽150px 高100px 字体大小10px，字体颜色红色 上内边距30px（保持总高度=height=100px） 下外边距20px</p>
        </div>
        <div id="white-box">
            <p>大小与绿色相同，上边距20px（注意观察绿色容器与当前容器的外边距）</p>
        </div>
    </div>
</div>
</body>
</html>